<template>
  <div>
    <t-dialog v-model:visible="visible" :header="isAdd ? '添加物料' : '编辑物料'" width="70%" @confirm="onConfirm">
      <div>
        <t-form :data="formData" :colon="true">
          <t-row :gutter="15">
            <t-col :span="4" class="form_col">
              <t-form-item label="项目编号" name="FMATERIALID">
                <t-input v-model="formData.FMATERIALID" disabled="" />
              </t-form-item>
            </t-col>
            <t-col :span="4" class="form_col">
              <t-form-item label="料号" name="FNumber">
                <t-input v-model="formData.FNumber" placeholder="请输入内容" />
              </t-form-item>
            </t-col>
            <t-col :span="4" class="form_col">
              <t-form-item label="名称" name="FName">
                <t-input v-model="formData.FName" placeholder="请输入内容" />
              </t-form-item>
            </t-col>
            <t-col :span="4" class="form_col">
              <t-form-item label="规格型号" name="FSpecification">
                <t-input v-model="formData.FSpecification" placeholder="请输入内容" />
              </t-form-item>
            </t-col>

            <t-col :span="4" class="form_col">
              <t-form-item label="物料分组" name="FMaterialGroup">
                <t-select v-model="formData.FMaterialGroupNumber" placeholder="请输入内容">
                  <t-option
                    v-for="(item, index) in materGroupList"
                    :key="index"
                    :label="item.FName"
                    :value="item.FNumber"
                    >{{ item.FName }}</t-option
                  >
                </t-select>
              </t-form-item>
            </t-col>

            <t-col :span="4" class="form_col">
              <t-form-item label="图号" name="F_ora_Text1">
                <t-input v-model="formData.F_ora_Text1" placeholder="请输入内容" />
              </t-form-item>
            </t-col>
          </t-row>
        </t-form>
      </div>
    </t-dialog>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from 'vue';
import { queryMaterialGroupList, saveMaterial } from '@/service/material';

export default {
  components: {},
  setup(props, { emit }) {
    const visible = ref(false);
    const isAdd = ref(false);
    const materGroupList = ref([]);
    const formData = reactive({
      account: '',
      password: '',
    });

    const openModal = async (row) => {
      isAdd.value = !row;
      if (!isAdd.value) {
        Object.assign(formData, row);
        // console.log('FMaterialGroup', formData);
        // formData
        // const res = await queryMaterialList({FNumber})
        // if(res[0]){
        //   Object.assign(formData,res[0])
        // }
      }
      visible.value = true;
    };

    const onConfirm = async () => {
      const res = await saveMaterial(formData);
      if (res) {
        visible.value = false;
        emit('updateData');
      }
    };

    const loadMaterGroup = async () => {
      const res = await queryMaterialGroupList({});
      if (res) {
        materGroupList.value = res;
        console.log('loadMaterGroup', res);
      }
    };

    onMounted(() => {
      loadMaterGroup();
    });

    return { visible, openModal, isAdd, formData, materGroupList, onConfirm };
  },
};
</script>
